<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Apple</title>
    <link rel="stylesheet" href="../public/css/tailwind.css" />
    <link rel="stylesheet" href="./css/nav.css" />
  </head>
  <body>
    <!-- style -->
    <style>
      body {
        padding-top: 48px;
      }

      .mt-2 {
        margin-top: 8px;
      }

      .text-white {
        color: #fff;
      }

      .card {
        width: 100%;
        height: 548px;
        background-size: auto 548px;
        background-repeat: no-repeat;
        background-position: center;
      }

      .card-info {
        --gap: 8px;

        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        padding-top: 24px;
      }

      h2.title {
        font-size: 32px;
        line-height: 1.125;
        font-weight: 600;
      }

      h3.subtitle {
        font-size: 19px;
        line-height: 1.21053;
        font-weight: 400;
        letter-spacing: 0em;
        margin-top: var(--gap);
      }

      .card-info .links {
        margin-top: calc(var(--gap) * 2);
        color: #06c;
      }

      .card-info .link {
        display: inline-flex;
        align-items: center;
      }

      .card-info .link::after {
        width: 24px;
        height: 24px;
        content: '';
        background: url('./imgs/arrow-right.png') center / cover;
        position: relative;
        display: inline-block;
      }

      .card-info .link:nth-of-type(2) {
        margin-left: 24px;
      }

      @media (min-width: 640px) {
        .card {
          height: 736px;
          background-size: auto 736px;
        }

        h2.title {
          font-size: 56px;
          line-height: 1.07143;
          font-weight: 600;
        }

        h3.subtitle {
          font-size: 28px;
          line-height: 1.10722;
          font-weight: 400;
          letter-spacing: 0.004em;
        }

        .card-info {
          --gap: 16px;

          padding-top: 48px;
        }

        .card-info .link {
          font-size: 21px;
          line-height: 1.381;
          font-weight: 400;
        }
      }
    </style>

    <!-- topnav -->
    <nav id="topnav">
      <input type="checkbox" id="toggle" />

      <div class="tn-btns">
        <label for="toggle">
          <div class="tn-btn tg-btn">
            <span></span>
            <span></span>
          </div>
        </label>

        <div class="tn-btn">
          <img src="./imgs/logo.png" class="logo" alt="" />
        </div>

        <div class="tn-btn"></div>
      </div>

      <div class="tn-list">
        <div class="tn-item">
          <a href="#" class="tn-link">商店</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Mac</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">iPad</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">iPhone</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Watch</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">AirPods</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">家居</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">商店</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">Apple 独家</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">配件</a>
        </div>
        <div class="tn-item">
          <a href="#" class="tn-link">技术支持</a>
        </div>
      </div>
    </nav>

    <!-- main -->
    <main>
      <section>
        <div
          class="card"
          style="
            background-image: url('https://s1.ax1x.com/2022/11/28/zaJSjs.jpg');
            background-color: #fbfbfd;
          "
        >
          <div class="card-info">
            <h2 class="title">iPhone 14</h2>
            <h3 class="subtitle">玩大玩超大</h3>
            <div class="links">
              <a href="#" class="link">进一步了解</a>
              <a href="#" class="link">购买</a>
            </div>
          </div>
        </div>

        <div
          class="card mt-2"
          style="
            background-image: url('https://s1.ax1x.com/2022/11/28/zaGzcj.jpg');
            background-color: #010101;
          "
        >
          <div class="card-info">
            <h2 class="title text-white">iPhone 14 Pro</h2>
            <h3 class="subtitle text-white">强力出圈</h3>
            <div class="links">
              <a href="#" class="link">进一步了解</a>
              <a href="#" class="link">购买 </a>
            </div>
          </div>
        </div>

        <div
          class="card mt-2"
          style="
            background-image: url('https://s1.ax1x.com/2022/11/28/zaJSjs.jpg');
            background-color: #fbfbfd;
          "
        >
          <div class="card-info">
            <h2 class="title">iPhone 14</h2>
            <h3 class="subtitle">玩大玩超大</h3>
            <div class="links">
              <a href="#" class="link">进一步了解</a>
              <a href="#" class="link">购买</a>
            </div>
          </div>
        </div>

        <div
          class="card mt-2"
          style="
            background-image: url('https://s1.ax1x.com/2022/11/28/zaGzcj.jpg');
            background-color: #010101;
          "
        >
          <div class="card-info">
            <h2 class="title text-white">iPhone 14 Pro</h2>
            <h3 class="subtitle text-white">强力出圈</h3>
            <div class="links">
              <a href="#" class="link">进一步了解</a>
              <a href="#" class="link">购买 </a>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- js -->
    <script>
      // 移除窗口变移动端时，下拉导航出现动画过渡的效果
      window.addEventListener('resize', () => {
        let tnList = document.querySelector('.tn-list')
        tnList.style.transition = 'none'

        setTimeout(() => {
          tnList.style.transition = ''
        }, 100)
      })
    </script>
  </body>
</html>
